<template>
<div class="exue-con" :class="{'over-hide':isShow}">
  <div v-bind:class="{'zhe-zhao':isShow}" @click="hideShow"></div>
  <p :class="{'warn':isShow}" @click="hideShow"></p>
  <!-- 口号 -->
  <div class="watchword" id="deviceorientation" 
     data-x-range="3"
     data-y-range="3"   
     data-invert-x="true"
     data-invert-y="true">
    <div class="watchword-bag" data-depth="12"></div>
  </div>
  <div class="teach-img">
    <div class="title ">
      <p class="title-text">智慧教学</p>
      <p class="title-line ignorethis"></p>
    </div>
  </div>
  <div class="title">
      <p class="title-text">下载客户端</p>
      <p class="title-line ignorethis"></p>
  </div>
  <!-- 二维码 -->
  <div class="code-box">
    <div class="code">
      <div class="code-img-left">
        <p class="text">e学云</p>
        <p class="button" @click="goDownExue">立即下载</p>
      </div>
    </div>
    <div class="code">
      <div class="code-img-right">
        <p class="text">e学云教学</p>
        <p class="button" @click="goDownExueTea">立即下载</p>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  data(){
    return{
        mp :'',
        isShow:false,
        androidFamily: "http://dfs.res.jzexueyun.com/apppackage/exuecloud_1_1_2/app_exuecloud_family.apk",//安卓家庭端
        IosFamily:"https://itunes.apple.com/cn/app/id1335472208?mt=8",//苹果家庭段
        androidTea:"http://dfs.res.jzexueyun.com/apppackage/exuecloud_1_1_2/app_exuecloud_teacher.apk",//安卓教师端
        IosTea:"https://itunes.apple.com/cn/app/id1335510687?mt=8"// 苹果教师端
    }
  },
  mounted() {
    this.mp = new mintParallax("#deviceorientation");
  },
  methods:{
    hideShow(){
      this.isShow=false;
    },
     isWeiXin() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
           return true;
        } else {
           return false;
        }
      },
    // 家庭端
     goDownExue(){
       let u = navigator.userAgent, app = navigator.appVersion;
       let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
       let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
       if(this.isWeiXin()){//微信浏览器 安卓手机 提示浏览器打开
            if (isAndroid) {
            this.isShow=true;
           }
           if (isIOS) {  //苹果家庭段
              window.location.href = this.IosFamily;
          }
       }else{//不是微信
          if (isAndroid) {// alert("安卓机！") 安卓家庭端
              window.location.href = this.androidFamily;
          }
          if (isIOS) {  //苹果家庭段
              window.location.href = this.IosFamily;
          }
        }
     },
    //  教师端
     goDownExueTea(){
       let u = navigator.userAgent, app = navigator.appVersion;
       let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
       let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
       if(this.isWeiXin()){//是微信浏览器 安卓手机 提示浏览器打开
           if (isAndroid) {
              this.isShow=true;
           }
           if (isIOS) {// alert("苹果果机！")  苹果教师端
              window.location.href = this.IosTea;
          }
       }else{
          if (isAndroid) {// alert("安卓机！") 安卓教师端
              window.location.href =this.androidTea;
          }
          if (isIOS) {// alert("苹果果机！")  苹果教师端
              window.location.href = this.IosTea;
          }
       }
     },
  }
}
</script>
<style lang="scss" scoped>
.zhe-zhao{
   width:100%;
   height: 100%;
   background-color:#000;
   opacity:0.85;
   position:fixed; 
   right: 0rem;
   top: 0rem;
   z-index: 100;
}
.warn{
   border: 0.01rem soild red;
   width:5.77rem;
   height: 3.78rem;
   position:fixed; 
   right: .64rem;
   top: 0rem;
   background: url('../img/warn.png') no-repeat center;
   background-size: 5.77rem 3.78rem;
   z-index: 110;
  }
@keyframes animatedBird {
0% { background-position: 5.20rem 4.60rem,-0.40rem 3.00rem,4.68rem -1.40rem; }
50% { background-position: 5.20rem 4.55rem,-0.40rem 2.95rem,4.68rem -1.58rem; }
100% { background-position: 5.20rem 4.60rem,-0.40rem 3.00rem,4.68rem -1.40rem; }
}
.exue-con{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 15.46rem;
  background-image:url("../img/bagTop.jpg"),url("../img/bagBottom.jpg");
  background-repeat: no-repeat, no-repeat; 
  background-position: 0 0, 0rem 9.00rem; 
  background-size: 7.50rem 9.02rem,7.50rem 6.54rem;
  // 口号
  .watchword{
    height:4.10rem ;
    padding-top:0.90rem;
    background-image:url("../img/yuan.png"),url("../img/left-cicle.png"),url("../img/top-cicle.png");
    background-position: 5.20rem 4.60rem,-0.40rem 3.00rem,4.68rem -1.40rem; 
    background-repeat: no-repeat,no-repeat,no-repeat; 
    background-size: 0.99rem 0.68rem,1.55rem 1.55rem,2.48rem 2.48rem;
    padding-bottom:0.30rem;
    animation: animatedBird 2.5s linear infinite;
    -webkit-backface-visibility: hidden; 
    -webkit-transform-style: preserve-3d;
    margin-bottom:1.10rem;
    .watchword-bag{
      margin-bottom:0;
      width: 100%;
      height: 3.69rem;
      background: url('../img/watchword.png') no-repeat center;
      background-size: 6.38rem 3.69rem;
    }
  }
  .teach-img{
    width: 6.82rem;
    height: 3.45rem;
    margin:0 auto;
    background: url('../img/teach-img.png') no-repeat center;
    background-size: 6.80rem 3.45rem;
    margin-bottom:0.60rem;
    .title{
      padding-top:0.40rem;
    }
  }
  .title{
      height: 0.59rem;
      .title-text{
        font-size:0.32rem;
        color:#fff;
        height: 0.50rem;
        line-height: 0.50rem;
        font-weight: 600;
      }
      .ignorethis{
        width: 20px;
        margin:0rem auto;
        height: 3px;
        border-radius: 0.04rem;
        background-color: #fff;
      }
  }

  .code-box{
      width: 6.45rem;
      margin:0rem auto;
      display: -webkit-box;
      display: -moz-box; 
      display:-webkit-flex; /* Safari */ 
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;/* Safari */
      display: flex;
      justify-content:space-between;
      margin-top: 0.40rem;
      .code{
          width:50%;
          height:3.00rem;
        .code-img-left{
           width: 100%;
           height: 100%;
           background: url('../img/exueyun.png') no-repeat center top;
           background-size: 1.03rem 1.03rem;
        }
        .code-img-right{
           width: 100%;
           height: 100%;
           background: url('../img/exue.png') no-repeat center top;
           background-size: 1.03rem 1.03rem;
        }
        .text{
            padding:.96rem 0rem 0rem;
            height:0.70rem;
            line-height:0.70rem;
            font-size: 0.22rem;
            color:#9daaff;
            text-align: center;
        }
        .button{
          color:#fff;
          height: 0.60rem;
          width: 2.22rem;
          margin: 0rem auto;
          line-height: 0.62rem;
          background: url('../img/down.png') no-repeat;
          background-size: 2.22rem 0.60rem;
          font-size:0.26rem;
        }
      }
  }
}
.over-hide{
  height: 100vh;
  overflow: hidden;
  // overflow-y :hidden;
}
</style>
